<template>
	<view class="reportlist">
		<!-- 列表项 -->
		<mescroll-list :fixed="false" :down="mescrollDown" :up="mescrollUp" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="workorderlist">
				<!-- 列表项 -->
				<view class="" style="display: flex;justify-content: center;align-items: center;height: 100vh;"
					v-if="loading==true">
					<u-loading mode="flower" show size="100rpx"></u-loading>
				</view>
				<view class="items" v-for="(item,index) in orderList_ " v-else-if="todohis_length!=0">
					<order-card :orderItem='item' :todohis="true" @gotoDetail="gotoDetail" @taketask='taketask'>
					</order-card>
				</view>
				<view class="" style="width: 750rpx;display: flex;justify-content: center;" v-else>
					<image class="empty-icon" :src="icon  " mode="widthFix" />
				</view>
			</view>
		</mescroll-list>
	</view>
</template>

<script>
	import mescrollList from '@/components/mescroll-uni/mescroll-list.vue'
	import mescrollMixins from '@/components/mescroll-uni/mescroll-mixins.js'
	import orderCard from '@/components/orderCard/orderCard.vue'
	import {
		getTodoHis
	} from '@/pages/api/orderp/orderp.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		mixins: [mescrollMixins],
		computed: {
			...mapState('enforce_law', ['infoItem']),
		},
		components: {
			mescrollList,
			orderCard
		},
		data() {
			return {
				mescrollUp: {
					auto: false,
					textNoMore: '-- 没有更多数据了 --'
				},
				mescrollDown: {
					auto: false,
					textNoMore: '-- 没有更多数据了 --'
				},
				pageSize_y: 10,
				isDelay: '工程渣土工单处置',
				options: {
					1: '工程渣土工单处置',
				},
				loading: false,
				todohis_: '',
				todohis_length: -1,
				orderList_: '',
				icon: 'https://www.mescroll.com/img/mescroll-empty.png'

			}
		},
		mounted() {
			this.loading = true
			this.getOrderList()
		},
		methods: {
			...mapMutations('enforce_law', ['setInfoItem']),
			//进入详情
			gotoDetail(item) {
				this.setInfoItem(item)
				// res.eventChannel.emit('getData', item)
				console.log('执法的列表详情谁谁谁', this.infoItem, item)
				uni.navigateTo({
					url: '/pages/index/listCard/todohis/todohis',
					success: res => {

					},
				})
			},
			taketask(item) {
				this.orderList_ = []
				this.getOrderList()
			},
			//获取工单列表
			getOrderList() {
				let params = {
					itemId: '402887ae7b4ac082017b52d8a4f51007,402887ae7e283327017edd9469e659fc',
					size: this.pageSize_y
				}
				return new Promise((resolve, reject) => {
					getTodoHis(params).then(res => {
						console.log('全部预警列表', res)
						this.orderList_ = res.rows
						this.todohis_length = res.rows.length
						resolve(res.rows)
					}).catch(err => {
						reject(err)
					}).finally(f => {
						this.loading = false
					})
				})

			},
			downCallback() {
				// this.$emit('downCallback',this.mescroll)
				this.pageSize_y = 10
				this.getOrderList().then(res => {
					this.mescroll.endSuccess(res.length, res.length > this.todohis_length);
				})
			},
			upCallback() {
				// this.$emit('upCallback',this.mescroll)
				this.pageSize_y += 10;
				this.getOrderList().then(res => {
					this.mescroll.endSuccess(res.length, res.length > this.todohis_length);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reportlist {
		background-color: #FFFFFF;
		overflow: hidden;
		height: 100%;

		.workorderlist {
			background-color: #FFFFFF;
			// height: 75vh;
		}

		.items {
			margin-top: 26rpx;
		}

		.empty-icon {
			width: 580rpx;
			height: 580rpx;
		}
	}
</style>
